<template>
<div>
	<el-row>
		<!-- <el-breadcrumb separator-class="el-icon-arrow-right" :span="24">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>電影管理</el-breadcrumb-item>
			<el-breadcrumb-item>電影列表</el-breadcrumb-item>
		</el-breadcrumb> -->
		<el-form :inline="true"  class="demo-form-inline">
			<el-form-item>
				<el-input placeholder="模糊查詢" v-model="str"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="findFilm">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="showDialog()">新增</el-button>
			</el-form-item>
		</el-form>
		<el-table
		 	v-loading="loading"
			element-loading-text="拼命加载中"
			element-loading-spinner="el-icon-loading"
			element-loading-background="rgba(0, 0, 0, 0.8)"
			:data="tableData5.slice((currentPage-1)*pagesize,currentPage*pagesize)"
			style="width: 100%"
			:default-sort = "{prop: 'filmId', order: 'descending'}">
			<el-table-column type="expand">
			<template slot-scope="props">
				<el-form label-position="left" inline class="demo-table-expand">
					<el-form-item label="電影名稱：">
						<span>{{ props.row.filmName }}</span>
					</el-form-item>
					<el-form-item label="電影導演：">
						<span>{{ props.row.filmDirection }}</span>
					</el-form-item>
					<el-form-item label="電影編劇：">
						<span>{{ props.row.filmScreenWriter }}</span>
					</el-form-item>
					<el-form-item label="電影主演：">
						<span>{{ props.row.filmActer }}</span>
					</el-form-item>
					<el-form-item label="上映時間：">
						<span>{{ props.row.filmDate }}</span>
					</el-form-item>
					<el-form-item label="電影時長：">
						<span>{{ props.row.filmLength }}</span>
					</el-form-item>
					<el-form-item label="電影簡介：">
						<span>{{ props.row.filmSummary }}</span>
					</el-form-item>
				</el-form>
			</template>
			</el-table-column>
			<el-table-column
			label="電影ID"
			sortable
			prop="filmId">
			</el-table-column>
			<el-table-column
			label="電影名称"
			sortable
			prop="filmName">
			</el-table-column>
			<el-table-column
			label="電影主演"
			prop="filmActer">
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button
					size="mini" @click="showDialog(scope.$index, scope.row)">编辑</el-button>
					<el-button
					size="mini"
					type="danger"  @click="openDel(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			@size-change="handleSizeChange"
		    @current-change="handleCurrentChange"
		    :current-page="currentPage"
			:page-sizes="[5, 10, 15, 20]"
			:page-size="pagesize"
			layout="total, sizes, prev, pager, next, jumper"
			:total="pageCount"
			style="text-align:center; margin:20px">
		</el-pagination>
		
		<el-dialog 
            :visible.sync="dialog.show"
            :close-on-click-modal='false'
            :close-on-press-escape='false'
            :title="dialog.title"
            :width="dialog.width"
            :modal-append-to-body="false">
            <div class="form">
                <el-form >
					<el-row :gutter="20">
					  	<el-col :span="6">
					  		<el-form-item label="电影名称">
		                        <el-input v-model="filmData.filmName"></el-input>
		                    </el-form-item>
					  	</el-col>
					  	
					  	<el-col :span="6">
					  		<el-form-item label="电影导演">
		                        <el-input v-model="filmData.filmDirection"></el-input>
		                    </el-form-item>
					  	</el-col>
					  	
					  	<el-col :span="6">
					  		<el-form-item label="电影编剧">
		                        <el-input v-model="filmData.filmScreenWriter"></el-input>
		                    </el-form-item>
					  	</el-col>
					  	
					  	<el-col :span="6">
					  		<el-form-item label="电影主演">
		                        <el-input v-model="filmData.filmActer"></el-input>
		                    </el-form-item>
					  	</el-col>
					  	
					  	<el-col :span="6">
					  		<el-form-item label="电影时长">
		                        <el-input v-model="filmData.filmLength"></el-input>
		                    </el-form-item>
					  	</el-col>
					  	
					  	<el-col :span="6">
					  		<el-form-item label="上映时间">
		                        <el-date-picker
							      v-model="filmData.filmDate"
							      type="date"
							      placeholder="选择日期">
							    </el-date-picker>
		                    </el-form-item>
					  	</el-col>
					  	
					  	<el-col :span="24">
					  		<el-form-item label="电影封面">
					  			<input type="file" id="filmImgUrl"/>
		                    </el-form-item>
					  	</el-col>
					  	
					  	<el-col :span="24">
					  		<el-form-item label="电影简介">
		                    </el-form-item>
					  	</el-col>
					  	<el-col :span="24">
	                        <UE :defaultMsg=filmData.filmSummary :config=config :id=ue1 ref="ue"></UE>
					  	</el-col>
					  	<el-col :span="24">
					  		<el-form-item label="国家">
		                    </el-form-item>
					  	</el-col>
					  	<el-col>
						  	<el-transfer 
						  		v-model="filmData.country" 
							    :titles="['待选项', '已选项']"
						  		:data="country">
						  	</el-transfer>
					  	</el-col>
					  	<el-col :span="24">
					  		<el-form-item label="电影类型">
		                    </el-form-item>
					  	</el-col>
					  	<el-col>
						  	<el-transfer 
						  		v-model="filmData.filmType" 
							    :titles="['待选项', '已选项']"
						  		:data="filmType">
						  	</el-transfer>
					  	</el-col>
					  	<el-col :span="24">
					  		<el-form-item label="语言">
		                    </el-form-item>
					  	</el-col>
					  	<el-col>
						  	<el-transfer 
						  		v-model="filmData.filmLan" 
							    :titles="['待选项', '已选项']"
						  		:data="filmLan">
						  	</el-transfer>
					  	</el-col>
					</el-row>

                    <el-form-item  class="text-center">
                        <el-button @click="hideDialog()">取 消</el-button>
                        <el-button @click="saveFilm()">提  交</el-button>
                    </el-form-item>

                </el-form>
            </div>
        </el-dialog>
        </el-row>
</div>
</template>

<script>
	import Qs from 'qs'
	import UE from '../../components/ue/ue.vue'
	export default {
		props : {
			'dataJson': {
				type: Array
			}
		}, 
		components: {UE},
		data() {
			return {
				value1: '',
				filmAll : [],
				loading: true,
				tableData5: [],
				pageCount : 1,
				currentPage:1,
        		pagesize:5,
        		str : "",
        		defaultMsg: '',
		        config: {
		          initialFrameWidth: null,
		          initialFrameHeight: 350
		        },
		        ue1: "ue1", // 不同编辑器必须不同的id,
        		dialog: {
                    width:'60%',
                    show : false,
                    title: '增加电影',
                    formLabelWidth:'120px'
                },
                imageUrl: '',
                filmData: {
                	filmId : "",
                	filmName : "",
                	filmImgUrl : "",
                	filmDate : "",
                	filmLength : "",
                	filmDirection : "",
                	filmScreenWriter : "",
                	filmActer : "",
                	filmSummary : "",
                	country : [],
                	filmType: [],
                	filmLan: []
                },
            	country : [],
            	filmType: [],
            	filmLan: []
			}
		},
		mounted ($route) {
	 		this.$nextTick(()=>{
 				var _this =  this;
				let filmAllType = {
  					"fId": "all",
  					"countryId": "all",
  				}
        		_this.$axios({
	  				method:"post",
	  				data:Qs.stringify(filmAllType),
	  				url:"http://www.qixiaocheng.cn/public/index.php/index/Filmdetail/findFilmBySome",
	  			}).then(function(result){
  					_this.tableData5 = result.data;
					_this.pageCount = result.data.length;
					_this.loading = false;
	  			});
	  			_this.pageCount = _this.tableData5.length
 	 		}
 		)},
		methods : {
			handleSizeChange: function (size) {
		        this.pagesize = size;
		    },
		    handleCurrentChange: function(currentPage){
		        this.currentPage = currentPage;
		    },
		    findFilm: function(){
		    	var _this =  this;
		    	_this.tableData5 =[];
		    	_this.loading = true;
		    	let filmAllType = {
  					"str": _this.str,
  				}
        		_this.$axios({
	  				method:"post",
	  				data:Qs.stringify(filmAllType),
	  				url:"http://www.qixiaocheng.cn/public/index.php/index/Filmdetail/findFilmByList",
	  			}).then(function(result){
					for(var i = 0;i<result.data.length;i++){
  						result.data[i]["imgUrl"] = 'http://www.qixiaocheng.cn/public/uploads/'+result.data[i]["filmImgUrl"] ;
  						result.data[i]["id"] = result.data[i]["filmId"];
  						result.data[i]["name"] = result.data[i]["filmName"];
  						result.data[i]["url"] = '/filmDetail/'+result.data[i]["filmId"];
  						_this.tableData5.push(result.data[i])
  					}
					_this.pageCount = result.data.length;
					_this.loading = false;
	  			});
		    },
		    handleAvatarSuccess(res, file) {
		        this.imageUrl = URL.createObjectURL(file.raw);
	      	},
	      	beforeAvatarUpload(file) {
		        const isJPG = file.type === 'image/jpeg';
		        const isLt2M = file.size / 1024 / 1024 < 2;
		
		        if (!isJPG) {
		          this.$message.error('上传头像图片只能是 JPG 格式!');
		        }
		        if (!isLt2M) {
		          this.$message.error('上传头像图片大小不能超过 2MB!');
		        }
		        return isJPG && isLt2M;
	      	},
		    openDel(index, row) {
		    	var _this =  this;
		        _this.$confirm('此操作将永久删除这个信息, 是否继续?', '提示', {
		          	confirmButtonText: '确定',
		          	cancelButtonText: '取消',
		          	type: 'warning'
		        }).then(() => {
		        	let filmData = {
	  					"id": row.filmId,
	  				}
			    	_this.$axios({
		  				method:"post",
		  				data:Qs.stringify(filmData),
		  				url:"http://www.qixiaocheng.cn/public/index.php/index/Filmdetail/delFilmbyId",
		  			}).then(function(result){
		  				let num;
		  				for(let i = 0; i<_this.tableData6.length; i++){
		  					if(_this.tableData6[i].sql_id == row.sql_id){
		  						num = i;
		  					}
		  				}
		  				console.log(num)
		  				_this.tableData6.splice(num,1);
		  			});
		  			this.$message({
			            type: 'success',
			            message: '删除成功!'
		          	});
		        }).catch(() => {
		          	this.$message({
			            type: 'info',
			            message: '已取消删除'
		          	});          
		        });
	      	},
	      	saveFilm(){
	      		var _this =  this;
	      		var film = new FormData();
	    			film.append("filmId",_this.filmData.filmId?_this.filmData.filmId:"");
	    			film.append("filmName",_this.filmData.filmName);
	    			film.append("filmImgUrl",document.getElementById('filmImgUrl').files[0]);
	    			film.append("filmDate",_this.filmData.filmDate);
	    			film.append("filmLength",_this.filmData.filmLength);
	    			film.append("filmDirection",_this.filmData.filmDirection);
	    			film.append("filmScreenWriter",_this.filmData.filmScreenWriter);
	    			film.append("filmActer",_this.filmData.filmActer);
	    			film.append("filmSummary",_this.$refs.ue.getUEContent());
	    			
	    			
	    			film.append("filmCountry",_this.filmData.country);
	    			film.append("filmType",_this.filmData.filmType);
	    			film.append("filmLang",_this.filmData.filmLang);
	    		/*2018/07/24:作品的图片增加*/
	      		_this.$axios({
	  				method:"post",
	  				data:film,
	  				url:"http://www.qixiaocheng.cn/public/index.php/index/Filmdetail/upload",
	  			}).then(function(result){
	  				_this.findFilm();
					_this.dialog.show = false;
	  			});
	      	},
	      	showDialog(index,row){
	      		var _this =  this;
	      		_this.dialog.show = true;
				//在显示的时候需要清空城市，类型，语言三个数组
				_this.country = [];
				_this.filmType = [];
				_this.filmLan = [];
				//查找所有的城市
				_this.$axios({
                    method: "post",
                    url: "http://www.qixiaocheng.cn/public/index.php/index/Country/findAllCountry",
                })
                .then(function(res) {
                	for (let i = 0; i < res.data.length; i++) {
			          _this.country.push({
			            key: res.data[i].countryId,
			            label: res.data[i].countryname,
			          });
			        }
               	})
                .catch(function(err) {
                   console.log(err);
               	});
               	
               	//查找所有的电影类型
				_this.$axios({
                    method: "post",
                    url: "http://www.qixiaocheng.cn/public/index.php/index/Filmtype/findAllFilmType",
                })
                .then(function(res) {
                	for (let i = 0; i < res.data.length; i++) {
			          _this.filmType.push({
			            key: res.data[i].fId,
			            label: res.data[i].name,
			          });
			        }
               	})
                .catch(function(err) {
                   console.log(err);
               	});
               	
               	//查找所有的电影语言
				_this.$axios({
                    method: "post",
                    url: "http://www.qixiaocheng.cn/public/index.php/index/Language/findAllLanguage",
                })
                .then(function(res) {
                	for (let i = 0; i < res.data.length; i++) {
			          _this.filmLan.push({
			            key: res.data[i].langId,
			            label: res.data[i].langName,
			          });
			        }
               	})
                .catch(function(err) {
                   console.log(err);
               	});
               	
               	
               	
	      		if(row){
	      			_this.dialog.title = "修改作品";
	      			_this.filmData = Object.assign({}, row);
	      			if(typeof (_this.$refs.ue) !== "undefined"){
	      				_this.$refs.ue.setUEContent(_this.filmData.filmSummary);
	      			}
	      		}else{
	      			_this.dialog.title = "增加作品";
	      			_this.filmData = {};
	      			if(typeof (_this.$refs.ue) !== "undefined"){
	      				_this.$refs.ue.setUEContent("");
	      			}
	      		}
				
	      	},
	      	hideDialog(){
	      		this.dialog.show = false;
	      	},
	      	getUEContent() {
		        let content = this.$refs.ue.getUEContent(); // 调用子组件方法
		        this.$notify({
		          	title: '获取成功，可在控制台查看！',
		          	message: content,
		          	type: 'success'
		        });
		        console.log(content)
	      	}
		}
	}
</script>

<style scoped>
	 .avatar-uploader .el-upload {
	    border: 1px dashed #d9d9d9;
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
	  }
	  .avatar-uploader .el-upload:hover {
	    border-color: #409EFF;
	  }
	  .avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	    width: 178px;
	    height: 178px;
	    line-height: 178px;
	    text-align: center;
	  }
	  .avatar {
	    width: 178px;
	    height: 178px;
	    display: block;
	  }
	.el-breadcrumb{
		margin-bottom: 15px;
	}
	.el-form-item{
		margin: 0px;
	}
	.demo-table-expand {
		font-size: 0;
	}
	.demo-table-expand label {
		width: 90px;
		color: #99a9bf;
	}
	.demo-table-expand .el-form-item {
		margin-right: 0;
		margin-bottom: 0;
		width: 50%;
	}
	.demo-table-expand .el-form-item:last-child {
		margin-right: 0;
		margin-bottom: 0;
		width: 100%;
	}
	input[type=file] {
	   line-height: 30px;
       padding-top: 5px;
	}
</style>